<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 16:49:08
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:33
-->
<template>
  <div class="applyQuery">
    <div class="apply">
      <div class="wrapper">
        <!-- 姓名和手机号 -->
        <div class="userInfo">
          <el-form :inline="true" :model="form" :rules="rules" ref="form">
            <!-- 姓名 -->
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="姓名"></el-input>
            </el-form-item>
            <!-- 手机号 -->
            <el-form-item label="手机号" prop="telephone">
              <el-input
                v-model="form.telephone"
                placeholder="手机号"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="toSearch('form')"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="toApply" v-if="data.length<1">
      <span>暂无报名信息，去<span @click="goApply()" class="btn">首页</span>选择你喜欢的项目报名吧</span>
      
    </div>

    <div class="projects" v-if="data.length>0">
      <div class="wrapper">
        <div class="title">已报名的游学项目</div>
        <div class="project" v-for="item in data" :key="item.id">
          <!-- 图片 -->
          <div class="pic">
            <img width="100%" :src="item.project.figure" alt="" />
          </div>
          <!-- 描述 -->
          <div class="dec">
            <!-- 标题 -->
            <div class="name">{{ item.project.name }}</div>
            <!-- 起始时间 -->
            <div class="time">
              <span>时间：</span>
              {{fmtDate(item.project.beginTime)}}~
              {{fmtDate(item.project.endTime)}}
            </div>
            <!-- money -->
            <div class="money">
              <span>费用：</span>
              元
            </div>
            <!-- applyTime -->
            <div class="applyTime">
              <span>报名时间：</span>
              {{fmtDate(item.insertTime)}}
            </div>
            <!-- applyStatus -->
            <div class="applyStatus">
              <span>报名状态：</span>
              <el-tag :type="item.status ==='未确认'? 'danger':'info'">{{item.status}}</el-tag>
            </div>
            <!-- desc -->
            <div class="desc">
              <span>简介：</span>
              {{item.project.introduce}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "../utils/request";
import {fmtDate} from '../filters/index'
export default {
  data() {
    return {
      // 报名信息
      data: [],
      // 表单验证
      form: {
        name: "",
        telephone: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入要查询的姓名", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入要查询的手机号", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 时间戳转换方法导入
    fmtDate,

    // goApply
    goApply(){
      this.$router.push({path:'./home'})
    },
    // 查询报名进度方法
    toSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          get("/index/apply/query", this.form).then((res) => {
            if (res.status == 200) {
              this.data = res.data;
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.apply {
  .wrapper {
    width: 800px;
    text-align: center;
    .userInfo {
      padding: 2em;
    }
  }
}
.toApply{
  width: 1240px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 2em;
  .btn{
    color: blue;
    cursor: pointer;
  }
}
.projects {
  .wrapper {
    width: 1240px;

    .title {
      font-size: 20px;
      line-height: 4em;
      border-bottom: 1px solid #ccc;
    }
    .project {
      border-bottom: 1px solid #ccc;
      // background-color: rgb(146, 85, 85);
      padding: 1em 0;
      display: flex;
      cursor: pointer;
      .pic {
        width: 300px;
        height: 200px;
        overflow: hidden;
        background-color: #ccc;
        border-radius: 5px;
      }
      .dec {
        padding: 0 2em;
        flex: 1;

        div{
          padding: .4em 0;
        }
        span{
          font-weight: bold;
        }
        .name {
          font-weight: bold;
        }
      }
    }
  }
}
</style>